<template>
	<view class="m-framework">
		<u-navbar :fixed="false" :title="navTitle" :autoBack="false" :safeAreaInsetTop="true" style="width: 100%;">
			<view class="LeftBox" slot="left">
				<!-- <slot name="navLeft"> -->
				<view class="x-f">
					<u-icon name="home-fill" color="#ffffff" size="28" @click="OpenPageRoute"></u-icon>

					<view class="x-f" style="font-size: 12px;color: #fff;margin-left: 10px;">
						<text>【{{MesBasicInfo.UserName}}】</text>
						<text style="margin-right: 2px;">{{dateFormat(MesBasicInfo.openDate,'Y-MM-dd hh:mm:ss')}}</text>
						<text>{{MesBasicInfo.warehouse}}</text>
					</view>
				</view>
				<!-- </slot> -->
			</view>

			<view class="RightBox" slot="right">

				<view class="x-f" style="font-size: 12px;color: #fff;max-width: 200px;">
					<view style="display: flex;">
						<view>当前时间</view>
						<view>
							<text>{{currentTime }}</text>
						</view>
					</view>

					<slot name="navRight">
						<u-button style="width: fit-content;" text="下班退出" color="#dbb56a" size="mini"></u-button>
					</slot>
				</view>
			</view>
		</u-navbar>

		<view class="workbench">

			<view class="x-f" style="height: 40px;padding-left: 10px;">
				<u-tag v-for="item in routeData" :text="item.Name" style="width: fit-content;margin-right: 6px;"
					size="mini" type="info" @click="ToLevel(item)"></u-tag>
			</view>

			<slot name="workbench">

			</slot>
		</view>


		<view class="m-framework_main y-f">
			<slot name="content">
				<view class="y-f m-framework_main_box">
					<view class="y-f m-framework_main_box-border">
						<slot></slot>
					</view>
				</view>
			</slot>
		</view>


		<view class="m-framework_bottom x-f" :style="$utils.disposeSafeBottomFun()">
			<slot name="bottom">

				<u-navbar :fixed="false" :autoBack="false" :safeAreaInsetTop="false" :height="30"
					:bgColor="bgColor + '!important'" style="width: 100%;">

					<view class="m-framework_bottom-version bottomText" slot="left" v-show="version">
						<slot name="bottomLeft">
							<text>当前版本：</text>
							<text>{{version}}</text>
						</slot>
					</view>

					<view class="m-framework_bottom-company bottomText" slot="center">
						<slot name="bottomCenter">

						</slot>
					</view>

					<view class="m-framework_bottom-status bottomText x-c" slot="right">
						<slot name="bottomRight">
							<view class="x-f">
								<text>当前登录:</text>
								<text>【{{networkType}}】</text>
							</view>

							<view class="x-f" style="margin-left: 4px;">
								<text>当前网络:</text>
								<view style="width: 14px;height: 14px;border-radius: 9999px;"
									:style="{backgroundColor: isConnected ? '#63df5a' : '#ff3029'}"></view>
							</view>
						</slot>
					</view>
				</u-navbar>
			</slot>
		</view>



		<uni-popup ref="popup_route" class="MainPopup" type="left" background-color="rgba(0,0,0,0.4)"
			mask-background-color="rgba(0,0,0,0.1)" @close="closeRoutePopup">
			<view class="y-f routePopup" style="width: 30vw;height: 100vh;">
				<slot name="leftPopup">
					<u-button v-for="item in routeData" :text="item.Name" @click="ToLevel(item)"
						style="margin-bottom: 10px;width: 90%;"></u-button>
				</slot>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		name: "mc-framework",
		props: {
			navTitle: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#51d0d0'
			},
		},
		data() {
			return {
				version: null, // 本机版本号
				networkType: null,
				isConnected: true,
				MesBasicInfo: {}, // 控制台基础信息
			};
		},
		created() {
			let that = this;
			// 获取版本
			this.version = plus.runtime.version;
			// 获取网络连接方式
			uni.getNetworkType({
				success: function(res) {
					that.networkType = res.networkType;

					if (res.networkType != 'none') {
						that.isConnected = true;
					} else {
						that.isConnected = false;
					}
				}
			});
			this.MesBasicInfo = this.$store.state.GuyueModule.MesBasicInfo;

			this.$store.dispatch('GuyueModule/startUpdatingTime'); // 组件创建时启动时间更新 


			// 注册网络状态变化监听器  
			uni.onNetworkStatusChange(this.onNetworkStatusChange);
		},
		computed: {
			currentTime() {
				return this.$store.state.GuyueModule.currentTimeString;
			},
			routeData() {
				return this.$store.state.GuyueModule.ModuleData_select;
			}
		},
		watch: {
			routeData: {
				handler(nVal, oVal) {
					// console.log(nVal);
					// console.log(nVal.length < oVal.length);

					if (nVal.length > oVal.length) { // 层级往下

					} else if (nVal.length < oVal.length) { // 层级往上


					} else { // 当前层级

					}

				}
			}
		},
		onUnload() {
			// 取消网络状态变化监听器  
			uni.offNetworkStatusChange(this.onNetworkStatusChange);
		},
		beforeDestroy() {
			this.$store.dispatch('GuyueModule/stopUpdatingTime'); // 组件销毁前停止时间更新  
		},
		methods: {
			OpenPageRoute() { // 点击navLeft图表
				// 打开弹层
				this.$refs.popup_route.open();

			},
			closeRoutePopup() {
				this.$refs.popup_route.close();

			},
			ToLevel(data) {
				let initData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));

				if (initData[initData.length - 1].MesMenuID != data.MesMenuID) { // 点击上级数据

					this.clearAfterCondition(initData, (item) => item.MesMenuID == data.MesMenuID);

					// 存储到vuex
					this.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'ModuleData_select',
						data: initData
					})

					// 触发工作台数据变化
					uni.$emit('changeLevel', initData, data);

					this.$emit('changeLevel', initData, data);
				}

			},
			clearAfterCondition(data, condition) {
				// 遍历数组找到第一个满足条件的元素的索引  
				for (let i = 0; i < data.length; i++) {
					if (condition(data[i])) {
						// 如果找到，则截断数组  
						data.splice(i + 1); // 注意：splice 会修改原数组  
						break;
					}
				}
			},


			onNetworkStatusChange(res) {
				console.log(res);
				if (res.isConnected) {
					this.isConnected = true;
					// 当网络连接后的逻辑  
					uni.showToast({
						title: "网络已连接"
					});
				} else {
					this.isConnected = false;
					// 当网络断开后的逻辑  
					uni.showToast({
						title: "网络已断开"
					});
					// 可以在这里处理网络断开后的逻辑，如显示提示信息、停止网络请求等  
				}
			},

			dateFormat(date, fmt) {
				date = new Date(date)

				var a = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				var o = {
					'Y': date.getFullYear(),
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					'S': date.getMilliseconds(), // 毫秒
					'w': date.getDay(), // 周
					'W': a[date.getDay()], // 大写周
					'T': 'T'
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[
							k]).length)))
					}
				}
				return fmt
			}
		}
	}
</script>

<style lang="scss">
	.m-framework {
		height: 100vh;
		display: flex;
		flex-direction: column;

		&_main {
			flex: 1;
			background-color: #e7e7e7;
			overflow: hidden;

			&_box {
				flex: 1;
				padding: 20px;
				width: 100%;
				height: 100%;

				&-border {
					border: 2px solid #e6c679;
					width: 100%;
					flex: 1;
					padding: 10px;
					height: 100%;
					overflow: hidden;
				}
			}

		}



		&_bottom {

			.bottomText {
				font-size: 12px;
				color: #fff;
			}

			&-company {
				text-align: center;
				flex: 1;
			}
		}
	}



	.routePopup {
		padding-top: var(--status-bar-height);
	}
</style>